<template>
	<!-- 商品详细 -->
	<view class="all" v-if="pageShow">
		<!-- swiper -->
		<view class="">
			<uni-swiper-dot class="swiper" field="content" mode="dot">
				<swiper class="swiper-box" @change="change" autoplay circular>
					<swiper-item v-for="(item, index) in dataAll.images_text" :key="index"
						@click="lbtpriview(index,dataAll.images_text)">
						<view class="swiper-item">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 商品标题 -->
		<view class="titleBox" v-if="!jifenbuy">
			<view class="top">
				<view class="title">{{dataAll.name}}</view>
				<view class="bottom">
					<view class="d3">积分：{{dataAll.smallgoodsunit.goods_sku_info.buy_send_score}}分</view>
					<view class="b2">库存：{{dataAll.smallgoodsunit.goods_sku_info.stock}}</view>
				</view>
			</view>
			<view class="bottom">
				<view class="b1">￥{{dataAll.smallgoodsunit.goods_sku_info.prev_xs_price?dataAll.smallgoodsunit.goods_sku_info.prev_xs_price:dataAll.smallgoodsunit.goods_sku_info.price}}</view>
				<view class="b2">月销：{{dataAll.mouth_sales || 0}}</view>
			</view>
		</view>
		<view class="titleBox" v-if="jifenbuy">
			<view class="top">
				<view class="title">{{dataAll.name}}</view>
			</view>
			<view class="bottom">
				<view class="huang_text main_size bold">积分：{{dataAll.smallgoodsunit.goods_sku_info.dh_score}}分</view>
				<view class="b2">库存：{{dataAll.smallgoodsunit.goods_sku_info.stock}}</view>
			</view>
		</view>
		<!-- 商品规格 -->
		<view class="parameterBox">
			<view class="item">
				<view class="hei_text bold titletext">商品参数</view>
			</view>
			<!-- <view class="item">
				<view class="i1">商品编号</view>
				<view class="i2">{{dataAll.goods_num}}</view>
			</view> -->
			<!-- <view class="item">
				<view class="i1">顺序号</view>
				<view class="i2">{{dataAll.weigh}}</view>
			</view> -->
			<view class="item">
				<view class="i1">原产地</view>
				<view class="i2">{{dataAll.ycd}}</view>
			</view>
			<view class="item" v-if="dataAll.bzq">
				<view class="i1">保质期</view>
				<view class="i2">{{dataAll.bzq}}</view>
			</view>
			<view class="item">
				<view class="i1">分类</view>
				<view class="i2">{{dataAll.category.name}}</view>
			</view>
			<view class="item">
				<view class="i1">品牌</view>
				<view class="i2">{{dataAll.goodsbrand.name}}</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="pj_show">
			<view class="flexbetween" @click="jumpurl('/pages/index/allevaluate?id=',listid)">
				<view class="hei_text main_size bold">评价</view>
				<view class="xiaohuang flexright">
					<view class="xiaolan margin_right1">查看全部</view>
					<u-icon name="arrow-right" color="#f5ac4f" size="12"></u-icon>
				</view>
			</view>
			<view class="flexcenter" v-if="!list.total">
				<view class="placeholderimage"></view>
			</view>
			<view class="margin_top" v-if="list.data.length && index==0" v-for="(item,index) in list.data"
				:key="item.id">
				<view class="flexbetween">
					<view class="flexleft">
						<image src="@/static/login/logo.png" mode="" class="listheadplimg"></image>
						<view class="xiaohei margin_left1">{{item.custom.username}}</view>
					</view>
					<view class="xiaohui">{{item.createtime_text}}</view>
				</view>
				<view class="hei_text bold main_size margin_top">{{item.content}}</view>
				<view class="flexleft">
					<view class="itemimgBox flexcenter margin_top" v-for="(ite,ind) in item.images_text" :key="ite"
						@click="lbtpriview(ind,item.images_text)">
						<image class="listleftimg radius" :src="ite" mode=""></image>
					</view>
				</view>
			</view>
			<view class="flexcenter xiaohuang margin_top" @click="jumpurl('/pages/index/pingjia?id=',listid)">点击评价
			</view>
		</view>
		<!-- 商品详细 -->
		<view class="shopDetail titletext bold hei_text">商品详情</view>
		<view class="detailBox">
			<image :src="item" mode="widthFix" style="width: 100%;" v-for="(item,index) in dataAll.content_images_text"
				:key="index" @click="lbtpriview(index,dataAll.content_images_text)"></image>
		</view>
		<!-- tabbar -->
		<view class="tabbarBox">
			<view class="left">
				<button open-type="contact" class="flexcolumn" style="line-height: 50rpx;">
					<!-- <image src="../../../static/smallIcon/kefu.png" class="l1" mode=""></image> -->
					<u-icon name="kefu-ermai" color="#999" size="28"></u-icon>
					<text>客服</text>
				</button>
				<view @click="goshopping" class="l2 flexcolumn" style="position: relative;">
					<u-icon name="shopping-cart" color="#999" size="28"></u-icon>
					<view class="jiaobiao" v-if="goodsnum.length!=0">{{goodsnum.length}}</view>
					<view>购物车</view>
				</view>
			</view>
			<view class="right" @click="upShop" v-if="!jifenbuy">购买/加入购物车</view>
			<view class="right" @click="upShop" v-if="jifenbuy">积分兑换</view>
		</view>

		<!-- 加入购物车的弹窗 -->
		<u-popup :show="shopShow" @close="shopShow = false" round="20">
			<view class="shopShowBox">
				<view class="top">
					<view class="topLeft">
						<image :src="dataAll.image_text" mode=""></image>
					</view>
					<view class="topRight" style="width: 70%;">
						<view class="topRightTop" v-if="!jifenbuy">￥{{checkunitMsg.goods_sku_info.prev_xs_price?checkunitMsg.goods_sku_info.prev_xs_price:checkunitMsg.goods_sku_info.price}}</view>
						<view class="topRightTop" v-if="jifenbuy">兑换：{{checkunitMsg.goods_sku_info.dh_score}}分</view>
						<view class="xiaohuang" v-if="checkunitMsg.goods_sku_info.buy_send_score && !jifenbuy">
							赠送积分：{{checkunitMsg.goods_sku_info.buy_send_score}}分</view>
						<view class="flexbetween" style="width: 100%;">
							<view class="b2">库存:
								<text :style="{color:Number(checkunitMsg.goods_sku_info.stock)>0?'':'#ff0000'}">{{checkunitMsg.goods_sku_info.stock}}</text>
							</view>
							<view class="b2" v-if="!jifenbuy">月销：{{dataAll.mouth_sales}}</view>
						</view>
					</view>
				</view>
				<view class="center">
					<view class="strongtext">单位</view>
					<view class="detail">
						<view class="item" :class="dataAll.checkunit==3?'dtcss':''" @click="changeunit(3)">
							{{dataAll.smallgoodsunit.name}}
						</view>
						<view class="item" :class="dataAll.checkunit==2?'dtcss':''" @click="changeunit(2)"
							v-if="dataAll.middlegoodsunit.id">{{dataAll.middlegoodsunit.name}}</view>
						<view class="item" :class="dataAll.checkunit==1?'dtcss':''" @click="changeunit(1)"
							v-if="dataAll.biggoodsunit.id">{{dataAll.biggoodsunit.name}}</view>
					</view>
				</view>
				<view class="bottom" style="padding-right: 40rpx;">
					<view class="bottomLeft">
						<view class="strongtext">购买数量</view>
					</view>
					<view class="flexbetween bghui radius" style="padding: 10rpx;">
						<view class="reduceimg" @click="minus()"></view>
						<input type="number" min="1" style="width: 150rpx; text-align: center;" v-model="buynum"
							@blur="plus(2)">
						<view class="addimg" @click="plus()"></view>
					</view>
				</view>
			</view>
			<!-- <view class="mainpadding" v-if="checkunitMsg.goods_sku_info.stock"> -->
			<view class="mainpadding" v-if="!jifenbuy">
				<view class="addcar1" @click="buy(data)">购买</view>
				<view class="buybox" @click="joinCart"> 加入购物车</view>
			</view>
			<view class="mainpadding" v-if="jifenbuy">
				<view class="buybox" style="width: 100%;" @click="buy(data)">积分兑换</view>
			</view>
			<!-- <view class="mainpadding" v-if="!checkunitMsg.goods_sku_info.stock">
				<view class="addcar2">补货中</view>
			</view> -->
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/commonFun/httpRequest.js");
	export default {
		data() {
			return {
				shopShow: false, // 加入购物车的弹窗
				listid: '',
				buynum: 1,
				dataAll: {},
				checkunitMsg: {}, //选中的单位信息
				pageShow: false,
				jifenbuy: false, //是否积分购买
				list: {},
				pj_show: false,
				goodsnum:0,
			};
		},
		onLoad(options) {
			let _this = this;
			_this.listid = options.id;
			if (options.type) {
				this.jifenbuy = true
			}
			this.getdetail()
			this.getpjShow()
			this.gouwuchesl()
			
		},
		onShow() {
			let _this = this;
			uni.$off('address');
			uni.$on('address', (data) => {
				console.log(data, '传过来的数据');
				_this.getaNewAdd(data); //根据id获取地址详情
			});


		},
		methods: {
			gouwuchesl(){
				if (httpRequest.checkIsLogin()) {
					httpRequest.request('/customapi/cart/cartList', 'GET', {
					}).then(res => {
						if(res.code == 1){
							this.goodsnum = res.data;
						}
					})
				}
				
			},
			getpjShow() {
				httpRequest.request('/customapi/index/getConfigInfo', 'GET', {}, false, false, true).then(res => {
					if (res.data.goods_comment == 1) {
						this.pj_show = true
						this.getlist()
					}
				})
			},
			getlist() {
				httpRequest.request('/customapi/goods/goodsCommentIndex', 'GET', {
					page: 1,
					limit: 12,
					goods_id: this.listid
				}, false, false, true).then(res => {
					this.list = res.data
				})
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 商品详情
			getdetail() {
				httpRequest.request('/customapi/goods/detail', 'GET', {
					id: this.listid
				}).then(res => {
					this.pageShow = true
					this.checkunitMsg = res.data.smallgoodsunit
					this.dataAll = res.data;
					this.$set(this.dataAll, "checkunit", 3) //1大单位，2中单位，3小单位

				})
			},
			// 选择单位
			changeunit(val) {
				this.dataAll.checkunit = val
				if (val == 1) {
					this.checkunitMsg = this.dataAll.biggoodsunit
				} else if (val == 2) {
					this.checkunitMsg = this.dataAll.middlegoodsunit
				} else if (val == 3) {
					this.checkunitMsg = this.dataAll.smallgoodsunit
				}
			},
			// 购物车+
			plus(val) {
				if (val == 2 && !this.buynum) {
					this.buynum = 1
					return
				}
				if (val != 2) {
					this.buynum = Number(this.buynum) + 1
				}

			},
			// 购物车——
			minus() {
				if (this.buynum == 1) {
					httpRequest.toast("不能再减了哦！")
					return false
				}
				this.buynum = Number(this.buynum) - 1
			},
			// 加入购物车
			joinCart() {
				this.shopShow = false;
				httpRequest.request('/customapi/cart/addCart', 'GET', {
					goods_id: this.listid,
					number: this.buynum,
					sku_id: this.checkunitMsg.goods_sku_info.id
				}).then(res => {
					this.gouwuchesl()
					httpRequest.toast(res.msg)
				})
			},
			// 购买
			buy() {
				let data = {
					ly_type: "detail", //来源，detail详情，cart购物车
					order_type: this.jifenbuy ? 2 : 1,
					data: [{
						goods_id: this.listid,
						num: this.buynum,
						goods_sku_id: this.checkunitMsg.goods_sku_info.id,
						goods_type: 1,
						user_coupon_id: "",
						price: this.checkunitMsg.goods_sku_info.prev_xs_price?this.checkunitMsg.goods_sku_info.prev_xs_price:this.checkunitMsg.goods_sku_info.price,
					}]
				}
				uni.navigateTo({
					url: "/pages/shoppingCart/orderDetail?data=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 加入购物车的弹窗
			upShop() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: '/pages/login/logintwice'
					})
					return;
				}
				this.shopShow = true;
			},
			change(e) {
				this.current = e.detail.current;
			},
			goshopping() {
				uni.switchTab({
					url: "/pages/shoppingCart/shoppingCart",
					success: res => {},
					fail: () => {},
					complete: () => {}
				})
			},
		}
	};
</script>

<style lang="scss">
	.jiaobiao{
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		color: #fff;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		background-color: #ff0000;
		border-radius: 50%;
		font-size: 24rpx;
	}
	.scroll-Y {
		min-height: 600rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.strongtext {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.mainpadding {
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;

		.addcar {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 80rpx;
			background-color: #F5AC4F;
			border-radius: 50rpx;

		}

		.addcar1 {
			width: 45%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border: 4rpx solid #F5AC4F;
			color: #F5AC4F;
			border-radius: 50rpx;
		}

		.addcar2 {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #999999;
			border: 4rpx solid #999999;
			color: #fff;
			border-radius: 50rpx;
		}

		.buybox {
			width: 45%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #F5AC4F;
			background-color: #F5AC4F;
			border-radius: 50rpx;
		}
	}

	.xiankuan {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bghui {
		background-color: #f7f7f6;
	}

	.reduceimg {
		width: 50rpx;
		height: 50rpx;
		background-image: url("@/static/userOrder/reduceimg.png");
		background-size: 100% 100%;
	}

	.addimg {
		width: 50rpx;
		height: 50rpx;
		background-image: url("@/static/userOrder/addimg.png");
		background-size: 100% 100%;
	}

	// 加入购物车的弹窗
	.shopShowBox {
		padding: 60rpx 20rpx;

		.bottom {
			display: flex;
			justify-content: space-between;

			.bottomLeft {
				display: flex;
				align-items: flex-end;

				.strongtext {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #333333;
					margin-right: 20rpx;
				}

				.b2 {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}

		.center {
			.detail {
				font-size: 28rpx;
				display: flex;
				padding: 20rpx 50rpx;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					border: 1px solid #999999;
					border-radius: 20px;
					padding: 16rpx 20rpx;
					margin-bottom: 30rpx;
					width: 40%;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.dtcss {
					border: 1px solid #F5AC4F;
					color: #F5AC4F;
				}

				.nosel {
					border: 1rpx solid lightgray;
				}
			}
		}

		.top {
			display: flex;
			margin-bottom: 20rpx;

			.topLeft {
				overflow: hidden;
				border-radius: 20rpx;

				image {
					border-radius: 20rpx;
					width: 100px;
					height: 100px;
					min-width: 100rpx;
					margin-right: 20rpx;
				}
			}

			.topRight {
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.topRightTop {
					color: #ff0000;
				}

				.topRightBottom {
					display: flex;
				}
			}
		}
	}

	.van-action-sheet__cancel {
		background-color: #f5ac4f !important;
		color: #ffffff !important;
		border-radius: 20px;
	}

	// 参数弹框
	.sheetBox {
		padding: 40rpx 40rpx 0 40rpx;
		font-size: 32rpx;

		.item {
			margin-bottom: 40rpx;
			display: flex;

			.i1 {
				color: #999999;
				width: 130rpx;
			}

			.i2 {
				margin-left: 20rpx;
				color: #333333;
			}
		}
	}

	.all {
		overflow: hidden;
		color: #333333;
	}

	.l1 {
		width: 40rpx;
		height: 40rpx;
	}

	// tabbar
	.tabbarBox {
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95vw;

		.right {
			padding: 20rpx 0;
			background-color: #f5ac4f;
			width: 60%;
			text-align: center;
			border-radius: 20px;
			color: #ffffff;
		}

		.left {
			font-size: 32rpx;
			width: 40%;
			display: flex;
			justify-content: space-around;
			text-align: center;

			.l2 {
				image {
					width: 40rpx;
					height: 40rpx;
				}

			}



		}
	}

	// 详细内容
	.detailBox {
		padding: 20rpx;
		padding-bottom: 120rpx;

	}

	// 商品详细
	.shopDetail {
		margin-top: 30rpx;
		text-align: center;
		padding: 20rpx 0;
		background-color: #ffffff;
	}

	// 商品规格
	.parameterBox {
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #ffffff;
		font-size: 32rpx;
		overflow: hidden;

		.item {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
		}
	}

	// 商品标题
	.titleBox {
		padding: 20rpx;
		background-color: #ffffff;

		.top {
			flex-direction: column;
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.detail {
				display: flex;
				font-size: 28rpx;

				.d1 {
					background-color: #f5ac4f;
					color: #ffffff;
					border-radius: 4px;
					margin-right: 20rpx;
					padding: 0 10rpx;
				}

				.d2 {
					background-color: #ff0000;
					color: #ffffff;
					border-radius: 4px;
					margin-right: 20rpx;
					padding: 0 10rpx;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;

			.b1 {
				color: #ff0000;
			}

			.b2 {
				color: #999999;
			}
		}
	}

	// swiper
	.swiper-item {
		image {
			width: 100%;
			height: 40vh;
		}
	}

	.swiper-box {
		height: 40vh;
	}

	button {
		border: none;
		border-radius: 0;
		background-color: transparent;
		padding: 0;
		margin: 0;
	}

	button::after {
		border: none;
	}

	.flexcolumn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>